{% extends "html/html_home.html" %}

{% block content %}
<link rel="stylesheet" type="text/css" href="/media/css/base.css" />
<style>
body{font-family: Verdana, helvetica, arial, sans-serif;}
td{text-align:center;font-size:11px;height:10px}
td.hi {display:none;}
td.rights {border-bottom:1px solid #000;border-right:1px solid #000;}
td.Normal {background:#00DB00}
td.Down {background:#FF2D2D}
td.Unstable{background:#FFFF6F}
td.Off {background:#ADADAD}
td.black {background:#000000}
td.red{background:#FF2D2D}
#inputtext {width:25px}
.dialog-overlay {BACKGROUND: gray; FILTER: alpha(opacity:50); opacity: 0.5}
.dialog {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: gray; FILTER: alpha(opacity:70); PADDING-BOTTOM: 10px; PADDING-TOP: 10px; opacity: 0.9; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px}
#dialog1-overlay {BACKGROUND: blue; FILTER: alpha(opacity=80); opacity: 0.8}
.dialog .bar {PADDING-RIGHT: 6px; PADDING-LEFT: 6px; MIN-HEIGHT: 15px; BACKGROUND: #000; PADDING-BOTTOM: 6px; CURSOR: move; COLOR: #fff; PADDING-TOP: 6px}
.dialog .bar .title {FLOAT: left; MARGIN-RIGHT: 10px}
.dialog .bar .close {FLOAT: right; CURSOR: pointer; TEXT-DECORATION: underline}
.dialog .content {height:300px; width:580px; overflow: auto; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 10px; PADDING-TOP: 10px}
.dialog IFRAME {WIDTH: '80%'; HEIGHT: '80%'}
.content IMG {MAX-WIDTH: '80%'; OVERFLOW: auto; MAX-HEIGHT: '80%'}
#hitable td {font-size: 11px;line-height: 13px;border: 1px solid #000000;vertical-align: top;padding: 5px;}
</style>
<table id="tb" cellspacing="0" cellpadding="1">
<tr style="background:#ADADAD"><td>SN</td><td>Master(Mysql)</td><td>Slave</td><td>Replication</td><td>Backup Time</td><td>Result</td><td>Size</td><td>Backup Used%</td><td>Backup Dir</td><td colspan=7>Backup File</td><td>Spend(mins)</td><td>Others</td></tr>
{% for d in mysqlData%}
<tr><td>{{forloop.counter}}</td><td><a href="javascript:void(0)" onclick="showdetail('a_{{forloop.counter}}')">{{d.3}}</a></td><td><a href="javascript:void(0)" onclick="showdetail('b_{{forloop.counter}}')">{{d.4}}</a></td><td {%if d.5 == "ERROR"%}class="red"{%endif%}>{{d.5}}</td><td>{{d.6}}</td><td {%if d.7 == "ERROR"%}class="red"{%endif%}>{{d.7}}</td><td>{{d.8}}</td><td {%if d.9 > 95 and d.9 != ""%}class="red"{%endif%}>{%if d.9 != ""%}{{d.9}}%{%endif%}</td><td>{{d.10}}</td>
<td style="background:{%if '1:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">1</td>
<td style="background:{%if '2:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">2</td>
<td style="background:{%if '3:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">3</td>
<td style="background:{%if '4:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">4</td>
<td style="background:{%if '5:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">5</td>
<td style="background:{%if '6:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">6</td>
<td style="background:{%if '7:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">7</td>
<td>{{d.12}}</td>
<td class="hi" id="a_{{forloop.counter}}">{{d.1}}</td><td class="hi" id="b_{{forloop.counter}}">{{d.2}}</td>
<td class="hi" id="c_{{forloop.counter}}">
<hr>
<table id="hitable">
<tr><td>SN</td><td>Backup Databases</td><td>Backup Type</td><td>Backup Crontab</td><td>remark</td></tr>
<tr><td>{{forloop.counter}}</td><td>{{d.13}}</td><td>{{d.14}}</td><td>{{d.15}}</td><td>
<form action="">
<textarea name="remark" cols="40" rows="2">{{d.0}}</textarea>
<input type="hidden" name="id" value="{{d.3}}_{{d.4}}"/>
<input type="submit" value="save"></td></tr>
</form>
</table>
</td>
<td>
<a href="javascript:void(0)" onclick="show('c_{{forloop.counter}}')">show detail</a>
</td>
</tr>{% endfor %}
</table>
<br><br><br>
<table id="tb" cellspacing="0" cellpadding="1">
<tr style="background:#ADADAD"><td>SN</td><td>Master(Sqlserver)</td><td>Backup Time</td><td>Result</td><td>Size</td><td>Backup Used%</td><td>Backup Dir</td><td colspan="7">Backup File</td><td>Spend(mins)</td><td>Others</td></tr>
{% for d in sqlserverData%}
<tr><td>{{forloop.counter}}</td><td><a href="javascript:void(0)" onclick="showdetail('s_a_{{forloop.counter}}')">{{d.3}}</a></td>
<td>{{d.6}}</td><td {%if d.7 == "ERROR"%}class="red"{%endif%}>{{d.7}}</td><td>{{d.8}}</td><td {%if d.9 > 95 and d.9 != ""%}class="red"{%endif%}>{%if d.9 != ""%}{{d.9}}%{%endif%}</td><td>{{d.10}}</td>
<td style="background:{%if '1:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">1</td>
<td style="background:{%if '2:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">2</td>
<td style="background:{%if '3:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">3</td>
<td style="background:{%if '4:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">4</td>
<td style="background:{%if '5:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">5</td>
<td style="background:{%if '6:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">6</td>
<td style="background:{%if '7:Y' in d.11%}#93FF93{%else%}#d0d0d0{%endif%}">7</td>
<td>{{d.12}}</td>
<td class="hi" id="s_a_{{forloop.counter}}">{{d.1}}</td><td class="hi" id="s_b_{{forloop.counter}}">{{d.2}}</td>
<td class="hi" id="s_c_{{forloop.counter}}">
<hr>
<table id="hitable">
<tr><td>SN</td><td>Backup Databases</td><td>Job Name</td><td>Backup Crontab</td><td>remark</td></tr>
<tr><td>{{forloop.counter}}</td><td>{{d.13}}</td><td>{{d.14}}</td><td>{{d.15}}</td><td>
<form action="">
<textarea name="remark" cols="40" rows="2">{{d.0}}</textarea>
<input type="hidden" name="id" value="{{d.3}}_{{d.4}}"/>
<input type="submit" value="save"></td></tr>
</form>
</table>
</td>
<td>
<a href="javascript:void(0)" onclick="show('s_c_{{forloop.counter}}')">show detail</a>
</td>
</tr>{% endfor %}
</table>
<br><br><br>
<table id="tb">
<tr style="background:#ADADAD"><td>IDC</td><td>DB</td><td>Size</td><td>Time</td></tr>
{%for i in remoteData%}
<tr><td>{{i.0}}</td><td>{{i.1}}</td><td>{{i.2}}</td><td>{{i.3}}</td></tr>
{%endfor%}
</table>
<br><br><br><br><br><br><br><br>
<div id="showOthers" style="display:none;position:fixed;margin:auto;bottom:0;width:100%;height:100px;background:#DFFFDF;">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/media/js/core.js"></script>
<script type="text/javascript" src="/media/js/calendar.js"></script>
<script type="text/javascript" src="/media/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript">
function Dialog(content, options)
{
    var defaults = { // é»˜è®¤å€¼ã€‚ 
        title:'æ ‡é¢˜',       // æ ‡é¢˜æ–‡æœ¬ï¼Œè‹¥ä¸æƒ³æ˜¾ç¤ºtitleè¯·é€šè¿‡CSSè®¾ç½®å…¶displayä¸ºnone 
        showTitle:true,     // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜æ ã€‚
        closeText:'[å…³é—­]', // å…³é—­æŒ‰é’®æ–‡å­—ï¼Œè‹¥ä¸æƒ³æ˜¾ç¤ºå…³é—­æŒ‰é’®è¯·é€šè¿‡CSSè®¾ç½®å…¶displayä¸ºnone 
        draggable:true,     // æ˜¯å¦ç§»åŠ¨ 
        modal:true,         // æ˜¯å¦æ˜¯æ¨¡æ€å¯¹è¯æ¡† 
        center:true,        // æ˜¯å¦å±…ä¸­ã€‚ 
        fixed:true,         // æ˜¯å¦è·Ÿéšé¡µé¢æ»šåŠ¨ã€‚
        time:0,             // è‡ªåŠ¨å…³é—­æ—¶é—´ï¼Œä¸º0è¡¨ç¤ºä¸ä¼šè‡ªåŠ¨å…³é—­ã€‚ 
        id:false,            // å¯¹è¯æ¡†çš„idï¼Œè‹¥ä¸ºfalseï¼Œåˆ™ç”±ç³»ç»Ÿè‡ªåŠ¨äº§ç”Ÿä¸€ä¸ªå”¯ä¸€idã€‚ 
	width:'100%', 
        height:$(document).height(),
        overflow:'auto',
};
    var options = $.extend(defaults, options);
    options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // å”¯ä¸€ID
    var overlayId = options.id + '-overlay'; // é®ç½©å±‚ID
    var timeId = null;  // è‡ªåŠ¨å…³é—­è®¡æ—¶å™¨ 
    var isShow = false;
    var isIe = $.browser.msie;
    var isIe6 = $.browser.msie && ('6.0' == $.browser.version);

    
    var barHtml = !options.showTitle ? '' :
        '<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>';
    var dialog = $('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide();
    $('body').append(dialog);

    var resetPos = function()
    {
        if(options.center)
        {
            var left = ($(window).width() - dialog.width()) / 2;
            var top = ($(window).height() - dialog.height()) / 2;
            if(!isIe6 && options.fixed)
            {   dialog.css({top:top,left:left});   }
            else
            {   dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()});   }
        }
    }

    var init = function()
    {
        /* æ˜¯å¦éœ€è¦åˆå§‹åŒ–èƒŒæ™¯é®ç½©å±‚ */
        if(options.modal)
        {
            $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
            $('#' + overlayId).css({'left':0, 'top':0,
                    'width':'100%',
                    'height':$(document).height(),
                    'z-index':++Dialog.__zindex,
                    'position':'absolute'})
                .hide();
        }

        dialog.css({'width':'600px','height':'350px','z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'});

        if(isIe6 && options.fixed)
        {
            dialog.css('position','absolute');
            resetPos();
            var top = parseInt(dialog.css('top')) - $(document).scrollTop();
            var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
            $(window).scroll(function(){
                dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
            });
        }

        /* ä»¥ä¸‹ä»£ç å¤„ç†æ¡†ä½“æ˜¯å¦å¯ä»¥ç§»åŠ¨ */
        var mouse={x:0,y:0};
        function moveDialog(event)
        {
            var e = window.event || event;
            var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
            var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
            dialog.css({top:top,left:left});
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        };
        dialog.find('.bar').mousedown(function(event){
            if(!options.draggable){  return; }

            var e = window.event || event;
            mouse.x = e.clientX;
            mouse.y = e.clientY;
            $(document).bind('mousemove',moveDialog);
        });
        $(document).mouseup(function(event){
            $(document).unbind('mousemove', moveDialog);
        });

        /* ç»‘å®šä¸€äº›ç›¸å…³äº‹ä»¶ã€‚ */
        dialog.find('.close').bind('click', this.close);
        dialog.bind('mousedown', function(){  dialog.css('z-index', ++Dialog.__zindex); });

        // è‡ªåŠ¨å…³é—­ 
        if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }
    }

    this.setContent = function(c)
    {
        var div = dialog.find('.content');
        if('object' == typeof(c))
        {
            switch(c.type.toLowerCase())
            {
            case 'id': // å°†IDçš„å†…å®¹å¤åˆ¶è¿‡æ¥ï¼ŒåŽŸæ¥çš„è¿˜åœ¨ã€‚
                div.html($('#' + c.value).html());
                break;
            case 'img':
                div.html('åŠ è½½ä¸­...');
                $('<img alt="" />').load(function(){div.empty().append($(this));resetPos();})
                    .attr('src',c.value);
                break;
            case 'url':
                div.html('åŠ è½½ä¸­...');
                $.ajax({url:c.value,
                        success:function(html){div.html(html);resetPos();},
                        error:function(xml,textStatus,error){div.html('å‡ºé”™å•¦')}
                });
                break;
            case 'iframe':
                div.append($('<iframe src="' + c.value + '" />'));
                break;
            case 'text':
            default:
                div.html(c.value);
                break;
            }
        }
        else
        {   div.html(c); }
    }

    this.show = function()
    {
        if(undefined != options.beforeShow && !options.beforeShow())
        {   return;  }

        var getOpacity = function(id)
        {
            if(!isIe)
            {   return $('#' + id).css('opacity');    }

            var el = document.getElementById(id);
            return (undefined != el
                    && undefined != el.filters
                    && undefined != el.filters.alpha
                    && undefined != el.filters.alpha.opacity)
                ? el.filters.alpha.opacity / 100 : 1;
        }
        /* æ˜¯å¦æ˜¾ç¤ºèƒŒæ™¯é®ç½©å±‚ */
        if(options.modal)
        {   $('#' + overlayId).fadeTo('slow', getOpacity(overlayId));   }
        dialog.fadeTo('slow', getOpacity(options.id), function(){
            if(undefined != options.afterShow){   options.afterShow(); }
            isShow = true;
        });
        // è‡ªåŠ¨å…³é—­ 
        if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }

        resetPos();
    }


    this.hide = function()
    {
        if(!isShow){ return; }

        if(undefined != options.beforeHide && !options.beforeHide())
        {   return;  }

        dialog.fadeOut('slow',function(){
            if(undefined != options.afterHide){   options.afterHide(); }
        });
        if(options.modal)
        {   $('#' + overlayId).fadeOut('slow');   }

        isShow = false;
    }

    this.close = function()
    {
        if(undefined != options.beforeClose && !options.beforeClose())
        {   return;  }

        dialog.fadeOut('slow', function(){
            $(this).remove();
            isShow = false;
            if(undefined != options.afterClose){   options.afterClose(); }
        });
        if(options.modal)
        {   $('#'+overlayId).fadeOut('slow', function(){$(this).remove();}); }
        clearTimeout(timeId);
    }

    

    init.call(this);
    this.setContent(content);
    
    Dialog.__count++;
    Dialog.__zindex++;
}
Dialog.__zindex = 500;
Dialog.__count = 1;
Dialog.version = '1.0 beta';
$("[id=tb]").find("tbody>tr:odd",this).addClass("row1");
$("[id=hitable]").find("tbody>tr",this).removeClass("row1");
function show(id){
    var t = $('#'+id).html();
    $("#showOthers").html(t);
    if ($("#showOthers").is(":visible")==false){
        $("#showOthers").toggle();
    };
};
$("#showOthers").dblclick(function() {
    if ($("#showOthers").is(":visible")==true){
        $("#showOthers").toggle();
    };

});
function dialog(content, options)
{
	var dlg = new Dialog(content, options);
	dlg.show();
	return dlg;
}
function showdetail(id){
	new Dialog($('#'+id).text(),{id:"dialog2",title:"",closeText:"Close",height:"100%",width:"100%"}).show();
};
</script>

{% endblock %}
